<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">

<script type="text/javascript">
function initLogs()
{
	jgrouse.log.addHandler(new jgrouse.logHandlers.ConsoleLog());
}

jgrouse_config = 
{
	initLogs : initLogs,
	logLevel : 'INFO',
	nologs : false,
	debug : true
}
</script>

<script type="text/javascript" src='../src/jgrouse.js'></script>
<script type="text/javascript" src='../src/log.js'></script>
<script type="text/javascript" src='../src/classloader.js'></script>

<style type="text/css">
.over
{
	font-size: 2em;
}
.spicy
{
	color: red;
}

.highlight
{
	background-color: green;
	color: white;
}

.bolder 
{
	font-weight: bold;
}
</style>

<script type="text/javascript">


jgrouse.module(
{
	name:'testContainer', 
	requires:['jgrouse.widgets.StaticText', 'jgrouse.widgets.TemplateParser', 
			   'jgrouse.widgets.Container'], 
	imports : ['jgrouse.widgets.TemplateParser', 'jgrouse.dom.Event', 'jgrouse.dom.Element', 'jgrouse.string.*'],  
	body:function(salt)
	{
		eval(salt);

		jgrouse.define('testContainer.Controller', 'jgrouse.util.BaseController', function(salt)
		{
			eval(salt);
			
			return {
				onTriggerLink : function(value)
				{
					alert('outer link = ' + value);
				}
			}
		});
		
		jgrouse.define('testContainer.InnerController', 'jgrouse.util.BaseController', function(salt)
		{
			eval(salt);
			
			return {
				/*onTriggerLink : function(value)
				{
					this._data.triggerLink = value;
					alert('inner link = ' + value);
				}*/
			}
		});
		
	}
});


function initApp()
{
	jgrouse.log.info('init app');
	var item = document.getElementById('appContainer');
	if (!window.origTemplate)
	{
		origTemplate = item.innerHTML;
	}
	app = new jgrouse.widgets.Container();
	app.setTemplate(item.innerHTML);
	var controller = new jgrouse.util.BaseController();
	app.bind(new jgrouse.util.MvcDriver(controller));
	app.setData({});
	item.innerHTML = '';
	app.add(item);
	jgrouse.log.info('initialized');
}


</script>

</head>
<body>
	<div>
		This test case demonstrate how one container with its own model could be
		embedded into another container
	</div>
	<div id='zhopa' style='border: thin solid black;'> bla!</div>
	<div id='appContainer' >
		<div _jgtype="container" _controller-class="testContainer.Controller">
			<div>Header</div>
			<div _jgtype="container" _controller-class="testContainer.InnerController" _extern-bindings="triggerLink:triggerLink" _bindings="triggerLink:triggerLink">
				<div> controller body start</div>
				<a id="blabla" _jgtype="link" href="dummyLink" _suppress-default="click" _bindings="triggerClick:triggerLink">Click here to propagate value!</a>
				<div> controller body end</div>
			</div>
		</div>
	</div>
	<a href="dummyLink" id='simple'>This is a simple link for testing</a>
</body>
<script type="text/javascript">

	jgrouse.require('testContainer', function()
	{
		initApp();
	});
</script>
</html>